<template>
    <div class="article-section p-t-55">
        <div class="article-box">
            <div class="card-list" ref="waterFall">
                <router-link
                    class="card-item"
                    :to="{ name: 'ArticleDetail', query: { id: item.id } }"
                    v-for="item in list"
                    :key="item.id"
                >
                    <div class="card-inner">
                        <div class="card-cover">
                            <img
                                class="card-img"
                                :src="item.image_url"
                                :alt="item.title"
                                object-fit="cover"
                                object-position="50%"
                            />
                        </div>
                        <div class="card-star">
                            <div class="star">{{ item.category_title }}</div>
                        </div>
                        <div class="card-info">
                            <div class="card-info_hd">
                                <div class="card-title">{{ item.title }}</div>
                                <div class="card-browse">{{ item.click }} 浏览</div>
                            </div>
                            <div class="card-info_bd">
                                <div class="card-desc">{{ item.summary }}</div>
                            </div>
                            <div class="card-info_ft">
                                <div class="crad-time">{{ formatTime(item.created_time) }}</div>
                                <div class="card-tags">
                                    <span v-for="v in item.tag_name" :key="v">{{ v }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </router-link>
            </div>
            <aside class="article-aside">
                <div class="aside-item" :class="index == 1 ? 'active' : ''">
                    <div class="subtitle">
                        <svg viewBox="0 0 1024 1024" width="17" height="17">
                            <path :d="svg.category" p-id="13124" fill="#515151"></path>
                        </svg>
                        <h6>分类</h6>
                    </div>
                    <ul class="category-list">
                        <router-link
                            :to="{ name: 'Article', query: { category: item.id } }"
                            v-for="item in category"
                            :key="item.id"
                            @click="onClick"
                        >
                            {{ item.title }} <span>{{ item.num }}</span>
                        </router-link>
                    </ul>
                </div>
                <div class="aside-item" :class="index == 2 ? 'active' : ''">
                    <div class="subtitle">
                        <svg viewBox="0 0 1024 1024" width="16" height="16">
                            <path :d="svg.tags" fill="#5C5C66" p-id="2239"></path>
                        </svg>
                        <h6>标签</h6>
                    </div>
                    <ul class="tags-list">
                        <router-link
                            :to="{ name: 'Article', query: { tag: item.id } }"
                            v-for="item in tags"
                            :key="item.id"
                            @click="onClick"
                        >
                            {{ item.title }}
                        </router-link>
                    </ul>
                </div>
            </aside>
        </div>
        <layout-footer />

        <div class="article-pop">
            <div class="pop-inner">
                <div class="pop-btn" @click="onOpen">
                    <svg viewBox="0 0 1024 1024" width="40" height="40">
                        <path :d="isShow ? svg.pop.d1 : svg.pop.d2" fill="#666666"></path>
                        <path :d="svg.pop.d3" fill="#1A6CBA" v-if="isShow"></path>
                    </svg>
                </div>
                <div class="pop-btn category" v-show="isShow" @click="onShowAside(1)">
                    <svg viewBox="0 0 1024 1024" width="17" height="17">
                        <path :d="svg.category" p-id="13124" fill="#515151"></path>
                    </svg>
                </div>
                <div class="pop-btn tags" v-show="isShow" @click="onShowAside(2)">
                    <svg viewBox="0 0 1024 1024" width="16" height="16">
                        <path :d="svg.tags" fill="#5C5C66" p-id="2239"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getCurrentInstance, ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import { onBeforeRouteUpdate } from 'vue-router';
import articleService from '@/global/service/articleService.js';
import { svg as SVG } from '@/global/local-data';

export default {
    name: 'Article',
    setup() {
        const { proxy } = getCurrentInstance();
        let Query = proxy.$route.query;
        let table = reactive({
            loading: false,
            rowId: 0,
            list: [],
            currentPage: proxy.$config.pagination.currentPage, // 默认页
            pageSize: proxy.$config.pagination.pageSize, // 每页多少条
            pageSizes: proxy.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
            layout: proxy.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
            total: 0 // 总条数
        });
        let category = ref([]);
        let tags = ref([]);
        let isShow = ref(false);
        let index = ref(0);
        let svg = SVG;
        let arg = {
            margin: 20,
            vgap: 20,
            hgap: 20
        };

        // 时间格式化
        const formatTime = (value) => {
            return proxy.$formatTime(value);
        };
        // 获取文章列表
        const getList = async () => {
            const { code, data } = await articleService.getList({
                per_page: table.pageSize,
                page: table.currentPage,
                category_id: Query.category ? Query.category : 0,
                tag_id: Query.tag ? Query.tag : 0,
                support: 0
            });

            if (code === 200) {
                table.list = data.list;

                getWaterFall();
            }
        };
        // 滚动加载
        const onScroll = async () => {
            table.currentPage += 1;
            const { code, data } = await articleService.getList({
                per_page: table.pageSize,
                page: table.currentPage,
                category_id: Query.category ? Query.category : 0,
                tag_id: Query.tag ? Query.tag : 0,
                support: 0
            });

            if (code === 200) {
                data.list.forEach((i) => {
                    table.list.push(i);
                });

                getWaterFall();
            }
        };
        // 获取分类列表
        const getCategory = async () => {
            const { code, data } = await articleService.getCategory();
            if (code === 200) {
                category.value = data.list;
            }
        };
        // 获取标签列表
        const getTags = async () => {
            const { code, data } = await articleService.getTags({ category_id: 0 });
            if (code === 200) {
                tags.value = data.list;
            }
        };
        // 瀑布流
        const getWaterFall = () => {
            proxy.$utils.waterFall(proxy, proxy.$refs.waterFall, arg);
            window.addEventListener('resize', () => {
                proxy.$utils.waterFall(proxy, proxy.$refs.waterFall, arg);
            });
        };
        // 打开pop
        const onOpen = () => {
            isShow.value = isShow.value ? false : true;
            if (isShow.value == false) index.value = 0;
        };
        // 打开aside
        const onShowAside = (num) => {
            if (index.value == num) {
                index.value = 0;
            } else {
                index.value = num;
            }
        };
        // 点击分类/标签
        const onClick = () => {
            table.currentPage = 1;
            isShow.value = false;
            index.value = 0;
        };

        window.addEventListener('scroll', proxy.$utils.scrollThrottle(onScroll, 500, 1000));

        // 监听路由
        onBeforeRouteUpdate((to) => {
            Query = to.query;
            getList();
        });

        getList();
        getCategory();
        getTags();

        return {
            ...toRefs(table),
            category,
            tags,
            formatTime,
            isShow,
            index,
            svg,
            onOpen,
            onShowAside,
            onClick
        };
    }
};
</script>

<style lang="less">
p {
    margin: 0 !important;
}

.article-aside {
    .aside-item {
        background-color: rgba(255, 255, 255, 0.9);
        transition: all 0.25s ease-in-out;
        margin-bottom: 20px;
        z-index: 2;
        &:hover {
            box-shadow: 0 8px 16px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
        }
        .subtitle {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            color: #333;
            border-bottom: 1px solid #ddd;
            background-color: #f5f8fa;
        }
        h6 {
            margin: 10px 5px;
            font-size: 1em;
            // font-family: '微软雅黑', Helvetica, NotoSansHans-Regular, ArialMT, '思源黑体',
            //     '冬青黑体', '苹方', Arail, Tabhoma, '华文黑体', '黑体';
            color: rgba(0, 0, 0, 0.8);
        }
        ul {
            padding: 30px 20px;
            overflow-x: auto;
        }
        .category-list {
            a {
                // position: relative;
                display: block;
                padding: 10px 15px;
                margin-bottom: -1px;
                background-color: #fff;
                border: 1px solid #ddd;
                color: #606f7b;
                &:hover {
                    background-color: #f5f5f5;
                }

                span {
                    float: right;
                    padding: 3px 7px;
                    font-size: 12px;
                    font-weight: bold;
                    color: #fff;
                    background-color: #777777;
                    border-radius: 50%;
                }
            }
        }

        .tags-list {
            a {
                color: #606f7b;
                display: inline-block;
                padding: 3px 15px;
                border-radius: 31px;
                margin: 0 10px 12px 0;
                background-color: #fff;
                border: 1px solid #ddd;
                &:hover {
                    background-color: #f5f5f5;
                }
            }
        }
    }
    .copyright {
        color: #606f7b;
        padding: 10px;
    }
}
@media (min-width: 800px) {
    .article-box {
        display: flex;
        .card-list {
            width: 66.6666666667%;
            margin: 20px 20px 0;
        }
        .article-aside {
            width: 33.3333333333%;
            margin: 20px 20px 0;
        }
    }
    .article-pop {
        display: none;
    }
}

@media (max-width: 800px) {
    .aside-item {
        display: none;
    }

    .article-pop {
        position: fixed;
        bottom: 5%;
        right: 5%;

        .pop-inner {
            position: relative;
        }
        .pop-btn {
            display: flex;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            box-shadow: 0 8px 16px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
            min-width: 30px;
            min-height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .pop-btn.category {
            position: absolute;
            top: -18px;
            left: -32px;
        }
        .pop-btn.tags {
            position: absolute;
            bottom: -18px;
            left: -32px;
        }
    }
    .aside-item.active {
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 380px;
        width: 80%;
    }
}
</style>
